<template>
  <!-- 队列案件池列表-页面 -->
  <section class="self-pool">
    <data-form :model="importModel" @onSearch="refreshData" :page="pageService" ref="form" :rules="rules">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model.trim="importModel.caseNumber" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model.trim="importModel.personalNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model.trim="importModel.personalName" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model.trim="importModel.idCard" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="账户总金额" prop="caseMoney">
          <number-range v-model="importModel.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="账户逾期总金额" prop="overdueAmount">
          <number-range v-model="importModel.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <number-range v-model="importModel.overduePeriod"></number-range>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="importModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="还款日" prop="payDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="importModel.payDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="importModel.payDate"></number-range>
          <!-- <el-input type="number" v-model="importModel.payDate"></el-input> -->
        </el-form-item>
        <el-form-item label="账单日" prop="billDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="importModel.billDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="importModel.billDate"></number-range>
          <!-- <el-input type="number" v-model="importModel.billDate"></el-input> -->
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model.trim="importModel.mobileNo" :maxlength="11" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-input v-model.trim="importModel.productType" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="渠道号" prop="channelCode">
          <el-input v-model.trim="importModel.channelCode" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <!-- <number-range
            v-model="importModel.queueCode"
            clearable
            :maxlength="20"
          ></number-range> -->
          <el-input v-model.trim="importModel.queueCode" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入催原因码" prop="reasonCode">
          <el-select v-model="importModel.reasonCode" placeholder="请选择" clearable>
            <el-option v-for="item in $dict.getDictData('ReasonCode')" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客群" prop="customersCode">
          <el-input v-model.trim="importModel.customersCode" :maxlength="20" clearable></el-input>
        </el-form-item>
        <el-form-item label="进入队列时间" prop="queueDate">
          <el-date-picker type="daterange" :editable="false" value-format="yyyy-MM-dd" v-model="importModel.queueDate" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="进入渠道时间" prop="channelDate">
          <el-date-picker type="daterange" value-format="yyyy-MM-dd" :editable="false" v-model="importModel.channelDate" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="AT" prop="at">
          <el-input v-model.trim="importModel.at" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="CT" prop="ct">
          <el-input v-model.trim="importModel.ct" clearable :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :selectionList.sync="selectionList" @onPageChange="refreshData" :page="pageService" :isSelectAll="isSelectAll">
      <template slot="buttons">
        <el-button @click="manualDistruibute" :disabled="selectionList.length === 0 && !isSelectAll">转派</el-button>
        <el-button @click="
            isSelectAll = true;
            selectionList = [];
          " v-if="!isSelectAll" :disabled="dataSet.length === 0">选择全部</el-button>
        <el-button @click="
            isSelectAll = false;
            selectionList = [];
          " type="danger" class="cancel-select-all" v-else>取消选择全部</el-button>
      </template>
      <template slot="columns">
        <el-table-column prop="caseInfo.caseNumber" label="账户号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
          <template slot-scope="scope">
            <a type="text" @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalNo" label="客户号" :min-width="$helper.getColumnWidth(6)" />
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)" />
        <el-table-column prop="idCard" label="证件号" :min-width="$helper.getColumnWidth(6)" />
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="productType" label="产品类型" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="caseMoney" label="账户总金额" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.toThousands(row.caseMoney)" />
        <el-table-column prop="overdueAmount" label="账户逾期总金额" :min-width="$helper.getColumnWidth(6)" :formatter="row => $filter.toThousands(row.overdueAmount)" />
        <!-- <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.payDate)" sortable />
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.billDate)" sortable /> -->
        <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" sortable/>
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" sortable/>
        <el-table-column prop="overduePeriod" label="逾期期数" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="queueCode" label="队列代码" :min-width="$helper.getColumnWidth(3)" />
        <el-table-column prop="reasonCode" label="入催原因码" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dictConvert(row.reasonCode, 'ReasonCode')" />
        <el-table-column prop="channelCode" label="渠道号" :min-width="$helper.getColumnWidth(6)" />
        <el-table-column prop="customersCode" label="客群" :min-width="$helper.getColumnWidth(6)" />
        <el-table-column prop="queueDate" label="进入队列时间" :min-width="$helper.getColumnWidth(6)" :formatter="row => $filter.dateFormat(row.queueDate)" />
        <el-table-column prop="channelDate" label="进入渠道时间" :min-width="$helper.getColumnWidth(6)" :formatter="row => $filter.dateFormat(row.channelDate)" />
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="close">关闭</el-button>
    </div>
    <!--案件分配弹框-->
    <transfer-model :dialogOpen="transferDialog" :selectionList="selectionList" :queueType="queueType" @dialogCancel="dialogCancel" @agentClose="dialogCancel" @confirmTransferDialog="
        confirmTransferDialog();
        dialogCancel();
      " :allData="allData" type="team" :searchQuery="paramsHandler()"></transfer-model>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import NumberRange from "~/components/common/number-range.vue";
import { QueueService } from "~/services/domain-service/queue-manage.service";
import { Prop, Emit } from "vue-property-decorator";
import TransferModel from "~/components/telephone-collection-manage/transferDialog.vue";
import { MENU_CHANNEL } from "~/config/enum.config";

@Layout("workspace")
@Component({
  components: {
    TransferModel,
    NumberRange
  }
})
export default class QueuePool extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(QueueService) private queueService: QueueService;
  // 表单验证规则
  private rules = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };
  private principalDataSet: any[] = [];
  private dataSet: any[] = [];
  private selectionList: any[] = [];
  private importModel: any = {
    queueDate: "",
    at: "",
    ct: "",
    channelDate: "",
    customersCode: "",
    personalNo: "",
    reasonCode: "",
    productType: "",
    channelCode: "",
    caseMoney: { max: "", min: "" },
    overdueDays: { max: "", min: "" },
    billDate: { max: "", min: "" },
    payDate: { max: "", min: "" },
    overduePeriod: { max: "", min: "" },
    overdueAmount: { max: "", min: "" },
    // queueCode: { max: "", min: "" },
    queueCode: "",
    mobileNo: "",
    personalName: "",
    caseNumber: "",
    carNo: "",
    idCard: ""
  };
  private allData: any[] = [];
  private transferDialog: boolean = false;
  private isSelectAll: boolean = false;
  private type: string = "self";

  @Prop() private queueCode;
  @Prop() private queueType;
  @Emit("close") public close() { }

  private dialogCancel() {
    this.transferDialog = false;
  }

  private confirmTransferDialog() {
    // 确定转派
    this.refreshData();
    this.isSelectAll = false;
  }

  private selectAll(type) {
    this.isSelectAll = type;
  }

  private manualDistruibute() {
    // 分案
    this.isSelectAll ? (this.allData = this.dataSet) : (this.allData = []);
    this.transferDialog = true;
  }

  private paramsHandler() {
    const params = { ...this.importModel };
    params.overdueAmountMax = this.importModel.overdueAmount.max;
    params.overdueAmountMin = this.importModel.overdueAmount.min;
    params.overduePeriodMax = this.importModel.overduePeriod.max;
    params.overduePeriodMin = this.importModel.overduePeriod.min;
    params.caseMoneyMax = this.importModel.caseMoney.max;
    params.caseMoneyMin = this.importModel.caseMoney.min;
    params.overdueDaysMax = this.importModel.overdueDays.max;
    params.overdueDaysMin = this.importModel.overdueDays.min;
    // params.queueCodeMax = this.importModel.queueCode.max;
    // params.queueCodeMin = this.importModel.queueCode.min;
    params.queueCode = this.importModel.queueCode;
    // params.payDateMax = this.$filter.dateRanageFormat(this.importModel.payDate).end;
    // params.payDateMin = this.$filter.dateRanageFormat(this.importModel.payDate).start;
    // params.billDateMax = this.$filter.dateRanageFormat(this.importModel.billDate).end;
    // params.billDateMin = this.$filter.dateRanageFormat(this.importModel.billDate).start;
    params.payDateMax = this.importModel.payDate.max;
    params.payDateMin = this.importModel.payDate.min;
    params.billDateMax = this.importModel.billDate.max;
    params.billDateMin = this.importModel.billDate.min;
    delete params.caseMoney;
    delete params.overdueDays;
    delete params.overduePeriod;
    delete params.overdueAmount;
    delete params.billDate;
    delete params.payDate;
    delete params.queueCode;
    params.queueCode = this.queueCode;
    return params;
  }

  private refreshData() {
    if (
      this.importModel.caseNumber &&
      this.$validator.regex.isChineseComma.test(this.importModel.caseNumber)
    )
      return this.$message.error("请用英文逗号！");
    const request: any = {
      ...this.paramsHandler()
    };
    this.queueService
      .getAllQueueCases(request, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
        data.map(item => {
          item.productType = item.productCategory;
        });
        this.selectionList = [];
      });
  }

  private reset() {
    const form: any = this.$refs["form"];
    form.resetForm();
    this.pageService.reset();
    this.refreshData();
  }

  /*
   * 根据委托方id，获取委托人姓名
   */
  // private getPrincipalName(id){
  //   const principalFind = this.principalDataSet.find(item => id === item.id)
  //   return principalFind.name
  // }
  private openExecutionPage(row) {
    this.close();
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Queue_pool,
      hiddenAction: true,
      hiddenRemark: true
    });
  }
}
</script>

<style lang="less" scoped>
.input-box1 {
  /deep/.el-select .el-input {
    width: 85px !important;
    margin-right: 10px;
  }
  .input1 {
    width: 85px !important;
  }
}
</style>
<style lang="less">
.self-pool {
  .el-input__inner {
    height: 26px !important;
  }
  .el-form-item__label {
    width: 130px !important;
  }
  .cancel-select-all {
    line-height: 26px;
    padding: 0;
    min-width: 100px;
    font-size: 12px;
    font-weight: 400;
  }
}
</style>
